<style>
    .LoginBoxInput button.verificationCodeBtn {
        width: auto !important;
	    padding:0 0.1rem;
    }
</style>
<div class="LoginRegisterHeader">
    <div class="BackBtn"><a href="javascript:history.go(-1)"><img src="__CDN__/map/images/return.png" alt="返回"/></a></div>
    <div class="LoginRegisterHeaderTitle">注册</div>
</div>
<form action="" method="post">
    <div class="LoginRegisterMian RegisterBg">
        <div class="RegisterParentBox">
            <div class="RegisterBox">
                <div class="LoginBoxTitle">用户注册</div>
                <input type="hidden" name="url" value="{$url}" />
                <div class="LoginBoxInput">
                    <input type="text" value="" name="mobile" id="mobile" placeholder="请输入您的手机号"/>
                </div>
                <div class="LoginBoxInput">
                    <input class="verificationCodeInput" id="captcha" type="text" value="" name="captcha" placeholder="请输入您的验证码"/>
                    <button class="verificationCodeBtn gradualBg">获取验证码</button>
                </div>
                <div class="LoginBoxInput">
                    <input type="password" value="" name="password" placeholder="请输入您的密码"/>
                </div>
                <div class="LoginBoxInput">
                    <input type="text" value="{$user_code ?? ''}" name="code" placeholder="请输入您的邀请码"/>
                </div>
                <div class="LoginBoxBtn">
                    <input type="button" id="submit" value="完成" disabled="true" >
                </div>
                <input type="hidden" id="http_url" value="{$http_url}" name="http_url" />
            </div>
        </div>

        <div class="RegisterTip" style="bottom: 2.2em;">
            注册即代表您同意
            <a class="dmColor" href="{:url('user/article')}?id=1">《用户协议》</a>
            <a class="dmColor" href="{:url('user/article')}?id=1">《隐私条款》</a>
        </div>
    </div>
</form>
<script type="text/javascript" src="__CDN__/assets/js/jquery.form.js"></script>

<script type="text/javascript">

    function vailPhone(account){

        var flag = false;
        var message = "";
        var myreg = /^(((13[0-9]{1})|(18[0-9]{1})|(14[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(19[8]{1})|(19[9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
        if(account == ''){
            message = "手机号码不能为空！";
        }else if(account.length !=11){
            message = "请输入有效的11位手机号码！";
        }else if(!myreg.test(account)){
            message = "请输入有效的手机号码！";
        }else{
            flag = true;
        }
        if(flag==false){
            alert(message);
        }

        return flag;
    }


    var countdown=60;
    $(document).on('click','.verificationCodeBtn',function(){
        var obj = $(this)
        var mobile= $('#mobile').val();
        if (mobile != "") {
            if (vailPhone(mobile)) {
                $.ajax({
                    type:"GET",
                    url:'{$http_url}'+'/api/sms/send?mobile='+mobile,
                    dataType:"json",
                    success:function(data){
                        //console.info(data)
                        if(data.code == 1){
                          settime(obj)
                            // $("input[name='captcha']").val(data.data);
                        }else{
                            alert(data.msg)
                            return false;
                        }
                    },
                    error:function(jqXHR){
                        console.log("Error: "+jqXHR.status);
                    }
                });
            }

        }else if(mobile ==''){
            alert("手机号不能为空");
            return false;
        }
        return false;
    })

    function settime(obj) { //发送验证码倒计时
        if (countdown == 0) {
            obj.attr('disabled',false);
            obj.addClass("gradualBg");
            obj.text("获取验证码");
            countdown = 60;
            return;
        } else {
            obj.attr('disabled',true);
            obj.removeClass("gradualBg");
            obj.text("重新发送(" + countdown + ")");
            countdown--;
        }
        setTimeout(function() {settime(obj) },1000)
    }

    //验证
    var bol= false;

    $(document).on('input','.LoginBoxInput input',function(){
        inputchange()
        var obj =$('#submit')
        if(bol){
            obj.attr('disabled',false);
            obj.addClass("gradualBg");
        }else{
            obj.attr('disabled',true);
            obj.removeClass("gradualBg");
        }
    })
    function inputchange(){
        $('.LoginBoxInput').each(function(){
            var that = $(this)
            var val =that.find('input').val()
            console.log(val)
            if(val.length>0){
                bol = true
            }else{
                bol = false
            }
        })
    }

    $('#submit').on('click',function () {

        var mobile=$('input[name="mobile"]').val();
        if($('input[name="mobile"]').val().length<=6){
            $('input[name="mobile"]').parent(".LoginBoxInput").css("border-bottom-color","red")
            return false
        }else{
            $("form").ajaxSubmit(function (e) {
                if(e.code==1){
                    window.location.href=e.url;
                }else{
                    alert(e.msg);
                }

            })
            $('input[name="mobile"]').parent(".LoginBoxInput").css("border-bottom-color","#F3F3F3")
        }

    })

    $("form").submit(function(e){
        var mobile=$('input[name="mobile"]').val();
        if($('input[name="mobile"]').val().length<=6){
            $('input[name="mobile"]').parent(".LoginBoxInput").css("border-bottom-color","red")
            return false
        }else{
           var captcha= $('#captcha').val();
           if(captcha==''){
               alert('验证码不能为空')
               return alse;
           }
            $.ajax({
                type:"GET",
                url:'{$http_url}'+'/api/sms/check?mobile='+mobile+'&event=register&captcha='+captcha,
                dataType:"json",
                async:false,
                success:function(data){
                    if(data.code==0){
                        $('#co').val(data.msg);
                        return false;
                    }
                }
            });
            $('input[name="mobile"]').parent(".LoginBoxInput").css("border-bottom-color","#F3F3F3")
        }

    });




</script>
